<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <title>Modal - Spec</title>
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta
      name="viewport"
      content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
    />
    <link href="../../../../../css/ionic.bundle.css" rel="stylesheet" />
    <link href="../../../../../scripts/testing/styles.css" rel="stylesheet" />
    <script src="../../../../../scripts/testing/scripts.js"></script>
    <script nomodule src="../../../../../dist/ionic/ionic.js"></script>
    <script type="module" src="../../../../../dist/ionic/ionic.esm.js"></script>
    <script type="module">
      import { modalController, createAnimation } from '../../../../dist/ionic/index.esm.js';
      window.modalController = modalController;
      window.createAnimation = createAnimation;
    </script>
    <style>
      #modal-header {
        padding-top: 5px !important;
        height: 55px;
      }
      #modal-header ion-title {
        padding-top: 5px;
      }

      #modal-header ion-note {
        display: block;
        width: 100%;
        height: 15px;
        text-align: center;
        font-size: 11px;
        color: #111;
      }

      ion-list ion-icon {
        width: 100%;
        height: 100%;
      }
    </style>
  </head>

  <body>
    <ion-app>
      <div class="ion-page">
        <ion-header>
          <ion-toolbar>
            <ion-buttons slot="start">
              <ion-button id="card-modal" onclick="presentModal(document.querySelectorAll('.ion-page')[1])">
                <ion-icon name="add" slot="icon-only"></ion-icon>
              </ion-button>
            </ion-buttons>
            <ion-title>Favorites</ion-title>
          </ion-toolbar>
        </ion-header>

        <ion-content>
          <ion-item>
            <ion-toggle>Use Custom Animation</ion-toggle>
          </ion-item>

          <ion-list id="list"></ion-list>
        </ion-content>
      </div>
    </ion-app>

    <script>
      window.addEventListener('ionModalDidDismiss', function (e) {
        console.log('DidDismiss', e);
      });
      window.addEventListener('ionModalWillDismiss', function (e) {
        console.log('WillDismiss', e);
      });

      const enterAnimation = (baseEl) => {
        const backdropAnimation = createAnimation()
          .addElement(baseEl.querySelector('ion-backdrop'))
          .fromTo('opacity', '0.01', '0.4');

        const wrapperAnimation = createAnimation()
          .addElement(baseEl.querySelectorAll('.modal-wrapper, .modal-shadow'))
          .keyframes([
            { offset: 0, opacity: '0', transform: 'scale(0)' },
            { offset: 1, opacity: '0.99', transform: 'scale(1)' },
          ]);

        return createAnimation()
          .addElement(baseEl)
          .easing('ease-out')
          .duration(500)
          .addAnimation([backdropAnimation, wrapperAnimation]);
      };

      const leaveAnimation = (baseEl) => {
        const backdropAnimation = createAnimation()
          .addElement(baseEl.querySelector('ion-backdrop'))
          .fromTo('opacity', '0.4', '0.01');

        const wrapperAnimation = createAnimation()
          .addElement(baseEl.querySelectorAll('.modal-wrapper, .modal-shadow'))
          .keyframes([
            { offset: 0, opacity: '0.99', transform: 'scale(1)' },
            { offset: 1, opacity: '0', transform: 'scale(0)' },
          ]);

        return createAnimation()
          .addElement(baseEl)
          .easing('ease-out')
          .duration(500)
          .addAnimation([backdropAnimation, wrapperAnimation]);
      };

      const people = [
        {
          name: 'Miyah Myles',
          email: 'miyah.myles@gmail.com',
          position: 'Business Analyst',
        },
        {
          name: 'June Cha',
          email: 'june.cha@gmail.com',
          position: 'Data Entry Clerk',
        },
        {
          name: 'Iida Niskanen',
          email: 'iida.niskanen@gmail.com',
          position: 'Business Analyst',
        },
        {
          name: 'Renee Sims',
          email: 'renee.sims@gmail.com',
          position: 'Lead Developer',
        },
        {
          name: 'Jonathan Nu\u00f1ez',
          email: 'jonathan.nu\u00f1ez@gmail.com',
          position: 'Receptionist',
        },
        {
          name: 'Sasha Ho',
          email: 'sasha.ho@gmail.com',
          position: 'Sales',
        },
        {
          name: 'Abdullah Hadley',
          email: 'abdullah.hadley@gmail.com',
          position: 'Sales Manager',
        },
        {
          name: 'Veeti Seppanen',
          email: 'veeti.seppanen@gmail.com',
          position: 'Marketing',
        },
        {
          name: 'Thomas Stock',
          email: 'thomas.stock@gmail.com',
          position: 'Clerical',
        },
        {
          name: 'Bonnie Riley',
          email: 'bonnie.riley@gmail.com',
          position: 'Medical Assistant',
        },
      ];

      const allContacts = [
        {
          name: 'Miyah Myles',
          email: 'miyah.myles@gmail.com',
          position: 'Office Assistant',
        },
        {
          name: 'June Cha',
          email: 'june.cha@gmail.com',
          position: 'Administrative Assistant',
        },
        {
          name: 'Iida Niskanen',
          email: 'iida.niskanen@gmail.com',
          position: 'Customer Service Representative',
        },
        {
          name: 'Renee Sims',
          email: 'renee.sims@gmail.com',
          position: 'Customer Service Representative',
        },
        {
          name: 'Jonathan Nu\u00f1ez',
          email: 'jonathan.nu\u00f1ez@gmail.com',
          position: 'Sales',
        },
        {
          name: 'Sasha Ho',
          email: 'sasha.ho@gmail.com',
          position: 'Marketing',
        },
        {
          name: 'Abdullah Hadley',
          email: 'abdullah.hadley@gmail.com',
          position: 'Marketing',
        },
        {
          name: 'Veeti Seppanen',
          email: 'veeti.seppanen@gmail.com',
          position: 'Project Manager',
        },
        {
          name: 'Thomas Stock',
          email: 'thomas.stock@gmail.com',
          position: 'Customer Service',
        },
        {
          name: 'Bonnie Riley',
          email: 'bonnie.riley@gmail.com',
          position: 'Executive Assistant',
        },
        {
          name: 'Steve T. Scaife',
          email: 'steve.t..scaife@gmail.com',
          position: 'Receptionist',
        },
        {
          name: 'Andreas Brixen',
          email: 'andreas.brixen@gmail.com',
          position: 'Director',
        },
        {
          name: 'Lilja Peltola',
          email: 'lilja.peltola@gmail.com',
          position: 'Sales Manager',
        },
        {
          name: 'Sean PJPGR Doran',
          email: 'sean.pjpgr.doran@gmail.com',
          position: 'Lead Developer',
        },
        {
          name: 'Elliana Palacios',
          email: 'elliana.palacios@gmail.com',
          position: 'Marketing',
        },
        {
          name: 'Eduard Franz',
          email: 'eduard.franz@gmail.com',
          position: 'Manager',
        },
        {
          name: 'Leah Stevens',
          email: 'leah.stevens@gmail.com',
          position: 'Attorney',
        },
        {
          name: 'Britney Cooper',
          email: 'britney.cooper@gmail.com',
          position: 'Data Entry Clerk',
        },
        {
          name: 'Chrishell Stause',
          email: 'chrishell.stause@gmail.com',
          position: 'Receptionist',
        },
        {
          name: 'Ana De Armas',
          email: 'ana.de.armas@gmail.com',
          position: 'Administrative Assistant',
        },
        {
          name: 'Jennifer Fritz',
          email: 'jennifer.fritz@gmail.com',
          position: 'Graphic Designer',
        },
        {
          name: 'Wyatt Morris',
          email: 'wyatt.morris@gmail.com',
          position: 'Executive Assistant',
        },
        {
          name: 'Lourdes Browning',
          email: 'lourdes.browning@gmail.com',
          position: 'Sales',
        },
        {
          name: 'Tim Schoch',
          email: 'tim.schoch@gmail.com',
          position: 'Product Designer',
        },
        {
          name: 'Nykyta Korotkevych',
          email: 'nykyta.korotkevych@gmail.com',
          position: 'Lead Developer',
        },
        {
          name: 'Carys Metz',
          email: 'carys.metz@gmail.com',
          position: 'Administrative Assistant',
        },
        {
          name: 'Loki Bright',
          email: 'loki.bright@gmail.com',
          position: 'Data Entry',
        },
        {
          name: 'Ferdinand Karl',
          email: 'ferdinand.karl@gmail.com',
          position: 'Medical Assistant',
        },
        {
          name: 'Andrew Kumar',
          email: 'andrew.kumar@gmail.com',
          position: 'Accounting',
        },
        {
          name: 'Mario Palmer',
          email: 'mario.palmer@gmail.com',
          position: 'Attorney',
        },
        {
          name: 'Zechariah Burrell',
          email: 'zechariah.burrell@gmail.com',
          position: 'Part Time',
        },
        {
          name: 'Lucr\u00e9cia Caldeira',
          email: 'lucr\u00e9cia.caldeira@gmail.com',
          position: 'Human Resources',
        },
        {
          name: 'Love Grayson',
          email: 'love.grayson@gmail.com',
          position: 'Office Assistant',
        },
        {
          name: 'Elizabeth Olsen',
          email: 'elizabeth.olsen@gmail.com',
          position: 'Accounting',
        },
        {
          name: 'Layton Diament',
          email: 'layton.diament@gmail.com',
          position: 'Receptionist',
        },
        {
          name: 'Sophie French',
          email: 'sophie.french@gmail.com',
          position: 'Medical Assistant',
        },
        {
          name: 'Mia Denys',
          email: 'mia.denys@gmail.com',
          position: 'Data Entry Clerk',
        },
        {
          name: 'Christine M. Maldonado',
          email: 'christine.m..maldonado@gmail.com',
          position: 'Director',
        },
        {
          name: 'Line Rolland',
          email: 'line.rolland@gmail.com',
          position: 'Project Manager',
        },
        {
          name: 'Micheal Murphy',
          email: 'micheal.murphy@gmail.com',
          position: 'Software Engineer',
        },
        {
          name: 'Jacob Ginnish',
          email: 'jacob.ginnish@gmail.com',
          position: 'Sales',
        },
        {
          name: 'Erwan Gauthier',
          email: 'erwan.gauthier@gmail.com',
          position: 'Marketing',
        },
        {
          name: 'Derrick Wells',
          email: 'derrick.wells@gmail.com',
          position: 'Office Assistant',
        },
        {
          name: 'Emre Topalo\u011flu',
          email: 'emre.topalo\u011flu@gmail.com',
          position: 'Project Manager',
        },
        {
          name: 'Lucy Walker',
          email: 'lucy.walker@gmail.com',
          position: 'Business Analyst',
        },
        {
          name: 'Ece Akman',
          email: 'ece.akman@gmail.com',
          position: 'Accounting',
        },
        {
          name: 'Sophie Louise Hart',
          email: 'sophie.louise.hart@gmail.com',
          position: 'Attorney',
        },
        {
          name: 'Carmen Velasco',
          email: 'carmen.velasco@gmail.com',
          position: 'Executive Assistant',
        },
      ];

      const list = document.querySelector('#list');

      const addFavorite = (p) => {
        const item = document.createElement('ion-item');
        item.innerHTML = `
        <ion-avatar slot="start"><ion-icon name="person"></ion-icon></ion-avatar>
        <ion-label>
          <h2>${p.name}</h2>
          <h3>${p.position}</h3>
        </ion-label>
      `;
        list.appendChild(item);
      };

      people.forEach((p) => addFavorite(p));

      function handleAddFavorite(email) {
        modalController.dismiss(email);
      }

      async function createModal(presentingEl) {
        const contactGroups = allContacts
          .sort((a, b) => {
            const aSplit = a.name.split(' ');
            const bSplit = b.name.split(' ');
            return aSplit[1].localeCompare(bSplit[1]);
          })
          .reduce((groups, contact) => {
            const firstLast = contact.name.split(' ')[1].charAt(0);

            if (!groups.hasOwnProperty(firstLast)) {
              groups[firstLast] = [];
            }
            groups[firstLast].push(contact);
            return groups;
          }, {});

        const sortedGroups = Object.keys(contactGroups)
          .map((k) => {
            return { letter: k, contacts: contactGroups[k] };
          })
          .sort((a, b) => a.letter.localeCompare(b.letter));

        const items = new Array(20).fill(0).map((item, i) => {
          return {
            title: `Person ${i}`,
          };
        });

        // create component to open
        const element = document.createElement('div');
        element.innerHTML = `
      <ion-header id="modal-header">
        <ion-note>Choose a contact to add to Favorites</ion-note>
        <ion-toolbar>
          <ion-title>Contacts</ion-title>
          <ion-buttons slot="end">
            <ion-button class="add">
              <ion-icon name="add" slot="icon-only"></ion-icon>
            </ion-button>
          </ion-buttons>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          ${sortedGroups
            .map((group) => {
              return `<ion-item-divider sticky="true">
                      <ion-label>
                        ${group.letter}
                      </ion-label>
                    </ion-item-divider>
                    ${group.contacts
                      .map(
                        (item) =>
                          `<ion-item onclick="handleAddFavorite('${item.email}')"><ion-label>${item.name}</ion-label></ion-item>`
                      )
                      .join('')}
                    `;
            })
            .join('')}
        </ion-list>
        <ion-button class="dismiss">Dismiss Modal</ion-button>
      </ion-content>
      `;

        // listen for close event
        const button = element.querySelector('ion-button.dismiss');
        button.addEventListener('click', () => {
          modalController.dismiss();
        });

        const create = element.querySelector('ion-button.add');
        create.addEventListener('click', async () => {
          const topModal = await modalController.getTop();

          presentModal(topModal);
        });

        const toggle = document.querySelector('ion-toggle');
        // present the modal
        const modalElement = await modalController.create({
          presentingElement: presentingEl,
          component: element,
          enterAnimation: toggle.checked ? enterAnimation : undefined,
          leaveAnimation: toggle.checked ? leaveAnimation : undefined,
        });
        return modalElement;
      }

      async function presentModal(presentingEl) {
        const modal = await createModal(presentingEl);
        await modal.present();
        const data = await modal.onWillDismiss();
        const person = allContacts.find((c) => c.email === data.data);
        person && addFavorite(person);
      }
    </script>
  </body>
</html>
